<!doctype html>
<html>
  <head>
    <title>PGlite Vector Example</title>
    <link rel="stylesheet" href="./styles.css" />
    <script src="./utils.js"></script>
    <script type="importmap">
      {
        "imports": {
          "@electric-sql/pglite": "../dist/index.js",
          "@electric-sql/pglite/vector": "../dist/vector/index.js"
        }
      }
    </script>
  </head>
  <body>
    <h1>PGlite Vector Example</h1>
    <div class="script-plus-log">
      <script type="module">
        import { PGlite } from '@electric-sql/pglite'
        import { vector } from '@electric-sql/pglite/vector'

        const pg = new PGlite({
          extensions: {
            vector,
            // Alternatively, you can specify the path to the extension tarball
            // vector: new URL("../dist/vector.tar.gz", import.meta.url),
          },
        })

        await pg.exec('CREATE EXTENSION IF NOT EXISTS vector;')
        await pg.exec(`
  CREATE TABLE IF NOT EXISTS test (
    id SERIAL PRIMARY KEY,
    name TEXT,
    vec vector(3)
  );
`)
        await pg.exec(
          "INSERT INTO test (name, vec) VALUES ('test1', '[1,2,3]');",
        )
        await pg.exec(
          "INSERT INTO test (name, vec) VALUES ('test2', '[4,5,6]');",
        )
        await pg.exec(
          "INSERT INTO test (name, vec) VALUES ('test3', '[7,8,9]');",
        )

        const res = await pg.exec(`
  SELECT * FROM test;
`)
        console.log(res)

        const res2 = await pg.exec(`
  SELECT
    name,
    vec,
    vec <-> '[3,1,2]' AS distance
  FROM test;
`)
        console.log(res2)
      </script>
      <div id="log"></div>
    </div>
  </body>
</html>
